<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8" />
    <title>Banner管理-Banner列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../superui/content/ui/global/bootstrap/css/bootstrap.min.css"
          th:href="@{/superui/content/ui/global/bootstrap/css/bootstrap.min.css}"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../superui/content/ui/global/font-awesome/css/font-awesome.css"
          th:href="@{/superui/content/ui/global/font-awesome/css/font-awesome.css}"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="../superui/content/adminlte/dist/css/AdminLTE.css"
          th:href="@{/superui/content/adminlte/dist/css/AdminLTE.css}"/>
    <link rel="stylesheet" href="../superui/content/adminlte/dist/css/skins/_all-skins.min.css"
          th:href="@{/superui/content/adminlte/dist/css/skins/_all-skins.min.css}"/>
    <link rel="stylesheet" href="../superui/content/min/css/supershopui.common.min.css"
          th:href="@{/superui/content/min/css/supershopui.common.min.css}"/>
    <link rel="stylesheet" href="../superui/content/plugins/bootstrap-table/bootstrap-table.css"
          th:href="@{/superui/content/plugins/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" href="../css/global.css"
          th:href="@{/css/global.css}"/>
    <!--全局通用框架样式 end-->
    <!-- iCheck -->
    <link rel="stylesheet" href="../superui/content/plugins/iCheck/square/blue.css"
          th:href="@{/superui/content/plugins/iCheck/square/blue.css}"/>

    <link rel="stylesheet" href="../../js/assets/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
          th:href="@{/js/assets/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}">
    <!--上传控件样式-->
    <link rel="stylesheet" href="../js/assets/lib/uploadify/uploadify.css"
          th:href="@{/js/assets/lib/uploadify/uploadify.css}"/>
    <style>
        .img_list .item{
            position: relative;
            width: 210px;
            height:210px;
            background-color:#cccccc;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            /*float: left;*/
            margin-right: 10px;
            text-align: center;
            padding-top: 110px;
        }
        .img_list .item img{

        }
        .scale{
            display: block;
        }
        .btn-close{
            position: absolute;
            z-index:1;
            top:0;
            right:0;
            color: #ffffff;
            width: 24px;
            height:24px;
            line-height: 24px;
            background: rgba(0,0,0,.75);
            text-align: center;
            cursor: pointer;
        }
        a.btn-close:hover{
            background: rgba(0,0,0,.55);
            color: #ffffff;
        }
        .img_list img{
            /*width: 100%;*/
        }
        .btn-download{
            display: none;
        }

        .cancel a:before{
            content: "\e014";
        }
    </style>
</head>
<body>
<section class="content-header">
    <h1>
        Banner管理
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Banner列表</a></li>
    </ol>
</section>
<!-- Main content -->
<section class="content">

    <div class="row">
        <!-- BEGIN SAMPLE TABLE PORTLET-->
        <div class="col-md-12">
            <!-- BEGIN SAMPLE TABLE PORTLET-->
            <div class="box-body">
                <div class="panel panel-default no-margin">

                </div>

                <div class="table-scrollable">
                    <table class="table-striped table-hover" id="bannerTable">

                    </table>
                </div>
            </div>
            <!-- END SAMPLE TABLE PORTLET-->

            <div id="bannerDialog" class="hide">
                <form id="frmMain" class="form-horizontal">
                    <div class="box-body" style="width: 99%">
                        <input type="hidden" id="id" name="id" value="">
                        <div class="form-group">
                            <label for="url" class="col-sm-3 control-label necessary ">访问链接</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="url" name="url" placeholder="请输入访问链接" />
                                <div class="mt-12">
                                    <p style="font-size: 12px">提示：</p>
                                    <p style="font-size: 12px">1、地址分为课程详情页面和外部地址</p>
                                    <p style="font-size: 12px">2、课程详情地址例子：ui-product.html?id=55(55为课程详情编号)</p>
                                    <p style="font-size: 12px">3、外部地址例子：http://www.baidu.com</p>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="url" class="col-sm-3 control-label necessary ">轮播图片</label>
                            <div class="col-sm-9">
                                <input type="hidden" id="imgName" name="imgName">
                                <input type="file" id="file" name="file"/>
                                <div class="mt-10"><span style="font-size: 12px">提示：仅请上传JPG,PNG格式图片，图片大小限3M，尺寸为750X664像素</span></div>
                                <div class="img_list row no-margin" id="img_list">
                            </div>
                        </div>

                    </div>
                    </div>
                </form>
            </div><!-- /.modal -->

        </div>
    </div>

</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.3 -->
<script src="../superui/content/ui/global/jQuery/jquery.min.js"
        th:src="@{/superui/content/ui/global/jQuery/jquery.min.js}"></script>
<!-- Bootstrap 3.3.6 -->

<script src="../superui/content/ui/global/bootstrap/js/bootstrap.min.js"
        th:src="@{/superui/content/ui/global/bootstrap/js/bootstrap.min.js}"></script>
<!--supershopui-->
<script src="../superui/content/min/js/supershopui.common.js"
        th:src="@{/superui/content/min/js/supershopui.common.js}"></script>

<!--bootstrap-table-->
<script src="../superui/content/plugins/bootstrap-table/bootstrap-table.js"
        th:src="@{/superui/content/plugins/bootstrap-table/bootstrap-table.js}"></script>
<script src="../superui/content/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"
        th:src="@{/superui/content/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script src="../js/assets/common/bootstrap-table-object.js"
        th:src="@{/js/assets/common/bootstrap-table-object.js}"></script>
<!-- iCheck -->
<script src="../superui/content/plugins/iCheck/icheck.min.js"
        th:src="@{/superui/content/plugins/iCheck/icheck.min.js}"></script>
<script src="./../../js/assets/common/Feng.js"
        th:src="@{/js/assets/common/Feng.js}"></script>
<!-- 请求脚本-->
<script src="./../../js/assets/common/ajax-util.js"
        th:src="@{/js/assets/common/ajax-util.js}"></script>
<!-- 请求脚本-->
<script src="./../../js/assets/common/common.js"
        th:src="@{/js/assets/common/common.js}"></script>
<script src="../../js/assets/lib/numeral/numeral.min.js"
        th:src="@{/js/assets/lib/numeral/numeral.min.js}"></script>

<!--bootsrtap日历控件脚本-->
<script src="../../js/assets/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"
        th:src="@{/js/assets/lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
<script src="../../js/assets/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        th:src="@{/js/assets/lib/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
<script src="../../js/assets/lib/bootstrap-datetimepicker/js/initDatetimepicker.js"
        th:src="@{/js/assets/lib/bootstrap-datetimepicker/js/initDatetimepicker.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var baseUrl = [[${#httpServletRequest.getContextPath()}]];
    //    var baseUrl = [[@{/}]];
    if (baseUrl === '/') baseUrl = '';
    Feng.addCtx(baseUrl);
    /*]]>*/
</script>

<!--上传控件-->
<script src="../../js/assets/lib/uploadify/jquery.uploadify.js"
        th:src="@{/js/assets/lib/uploadify/jquery.uploadify.js}"></script>

<!-- banner脚本-->
<script src="./../../js/banner/list/info.js"
th:src="@{/js/banner/list/info.js}"></script>
<script src="./../../js/banner/list/list.js"
        th:src="@{/js/banner/list/list.js}"></script>
</body>
</html>